<template>
  <div>
    <div class="apply-type-box">
      <div class="title">全部储值方式</div>
      <ul class="type-all-list">
        <li
          v-for="(item, index) in titleList"
          :key="index"
          class="type-item"
          @click="sendByBus(item)"
        >
          <div class="type-icon">
            <img
              src="../../../assets/img/stored/pay_type/alipay.png"
              alt=""
              v-if="item == '支付宝支付'"
            />
            <img
              src="../../../assets/img/stored/pay_type/mycard.png"
              alt=""
              v-else-if="item == 'mycard'"
            />
            <img
              src="../../../assets/img/stored/pay_type/paypal.png"
              alt=""
              v-else-if="item == 'paypal'"
            />
            <img
              src="../../../assets/img/stored/pay_type/UNIPin.png"
              alt=""
              v-else-if="item == 'UniPin'"
            />
            <img
              src="../../../assets/img/stored/pay_type/gash.png"
              alt=""
              v-else-if="item == 'GASH'"
            />
            <img
              src="../../../assets/img/stored/pay_type/Razer_Gold.png"
              alt=""
              v-else-if="item == 'Razer Gold'"
            />
            <img
              src="../../../assets/img/stored/pay_type/wechat.png"
              alt=""
              v-else-if="item == '微信支付'"
            />
          </div>
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
    <stored-alipay
      :show="alipayShow"
      title="支付宝支付"
      @alipay-click="alipayClick"
      :value="this.storedList.cny"
      company="CNY"
    />
    <stored-we-chatpay
      :show="wechatShow"
      title="微信支付"
      @alipay-click="wechatClick"
      :value="this.storedList.cny"
      company="CNY"
    />
    <stored-my-card
      :show="mycardShow"
      title="MyCard"
      @alipay-click="mycardClick"
      :value="this.storedList.twd"
      company="TWD"
      :storedList="storedList"
    />
    <stored-paypal
      :show="paypalShow"
      title="PayPal"
      @alipay-click="paypalClick"
      :value="this.storedList.usd"
      company="USD"
      :rate="this.storedList.rate_arr"
    />
    <stored-gashpay
      :show="gashShow"
      title="GASH"
      @alipay-click="gashClick"
      :value="this.storedList.twd"
      company="TWD"
      :storedList="storedList"
    />
    <stored-razer-gold
      :show="razerShow"
      title="Razer Gold"
      @alipay-click="razerClick"
      :value="this.storedList.credit"
      company="MYR"
      :storedList="storedList"
    />
    <stored-uni-pinpay
      :show="unipinShow"
      title="UniPin"
      @alipay-click="unipinClick"
      :type="this.storedList.currency_code_arr"
      :storedList="storedList"
    />
    <stored-last-time
      :info="storedList.pay_recommend_arr"
      @apply-click="applyClick"
      v-show="payType"
    />
  </div>
</template>

<script>
import StoredAlipay from "../payment/StoredAlipay.vue";
import StoredGashpay from "../payment/StoredGashpay.vue";
import StoredLastTime from "../payment/StoredLastTime.vue";
import StoredMyCard from "../payment/StoredMyCard.vue";
import StoredPaypal from "../payment/StoredPaypal.vue";
import StoredRazerGold from "../payment/StoredRazerGold.vue";
import StoredUniPinpay from "../payment/StoredUniPinpay.vue";
import StoredWeChatpay from "../payment/StoredWeChatpay.vue";
export default {
  components: {
    StoredAlipay,
    StoredWeChatpay,
    StoredPaypal,
    StoredUniPinpay,
    StoredMyCard,
    StoredGashpay,
    StoredRazerGold,
    StoredLastTime,
  },
  props: {
    storedList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      alipayShow: false,
      wechatShow: false,
      mycardShow: false,
      paypalShow: false,
      gashShow: false,
      razerShow: false,
      unipinShow: false,
    };
  },
  computed: {
    titleList() {
      if (this.storedList.pay_sort) {
        let arr = [];
        let pay_name = this.storedList.pay_name;
        let pay_sort = this.storedList.pay_sort;
        pay_sort.forEach((item) => {
          for (let key in pay_name) {
            if (item == key) {
              arr.push(pay_name[key]);
            }
          }
          return arr;
        });
        return arr;
      }
    },
    payType() {
      const arr = [21,4,5,6,7,8,51];
      const currentpay = this.storedList.success_paytype;
      if (arr != null) {
        const index = arr.indexOf(currentpay);
        if (index == "-1") {
          return false;
        } else {
          return true;
        }
      }
    },
  },
  methods: {
    sendByBus(index) {
      if (index == "支付宝支付") {
        this.alipayShow = true;
      } else if (index == "微信支付") {
        this.wechatShow = true;
      } else if (index == "mycard") {
        this.mycardShow = true;
      } else if (index == "paypal") {
        this.paypalShow = true;
      } else if (index == "GASH") {
        this.gashShow = true;
      } else if (index == "Razer Gold") {
        this.razerShow = true;
      } else if (index == "UniPin") {
        this.unipinShow = true;
      }
      // bus.$emit("sendByBus", this.titleList[index], index);
    },
    alipayClick(item) {
      this.alipayShow = !item;
    },
    wechatClick(item) {
      this.wechatShow = !item;
    },
    paypalClick(item) {
      this.paypalShow = !item;
    },
    unipinClick(item) {
      this.unipinShow = !item;
    },
    mycardClick(item) {
      this.mycardShow = !item;
    },
    gashClick(item) {
      this.gashShow = !item;
    },
    razerClick(item) {
      this.razerShow = !item;
    },
    applyClick(id) {
      if (id == 21) {
        this.alipayShow = true;
      } else if (id == 4) {
        this.mycardShow = true;
      } else if (id == 5) {
        this.paypalShow = true;
      } else if (id == 51) {
        this.unipinShow = true;
      } else if (id == 6) {
        this.gashShow = true;
      } else if (id == 7) {
        this.razerShow = true;
      } else if (id == 8) {
        this.wechatShow = true;
      }
    },
  },
};
</script>

<style scoped>
.apply-type-box {
  background: #fff;
  border-radius: .266667rem;
  box-sizing: border-box;
  width: 9.146667rem;
  height: auto;
  margin: .266667rem .426667rem;
  padding: .533333rem .266667rem;
}

.title {
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
  line-height: .6rem;
  /* padding: 30px 0 20px 0; */
}

.type-all-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: .4rem 0 0 0;
}

.type-all-list li:nth-child(2n-1) {
  margin-bottom: .266667rem;
}

.type-item {
  box-sizing: border-box;
  width: 4.133333rem;
  height: 1.546667rem;
  border: .04rem solid #cccccc;
  border-radius: .266667rem;
  padding: .386667rem .32rem;
  display: flex;
  align-items: center;
  font-size: .373333rem;
  font-weight: 400;
  color: #222222;
}

.type-icon {
  margin-right: .133333rem;
  width: .773333rem;
  height: .773333rem;
}

.type-icon img {
  width: .773333rem;
  height: .773333rem;
}
</style>